<template>
  <div class="top">
    <div class="charts_bar" ref="Broken_bar"></div>
  </div>
</template>
<script>
// import { queryOutStoreListByWarehouse } from "@/api/bigtwo";
export default {
  data() {
    return {
      names: [
        "河北华北分仓1号库",
        "河北华北分仓2号库",
        "河北华北分仓3号库",
        "河北华北分仓4号库",
        "河北华北分仓5号库",
        "河北华北分仓6号库",
        "河北华北分仓7号库",
        "河北华北分仓8号库",
        "河北华北分仓9号库",
        "河北华北分仓10号库",
        "河北华北分仓11号库",
        "河北华北分仓12号库",
      ], //出库地方
      values: [
        12341234,
        23452334,
        12341234,
        34567456,
        23452345,
        34563456,
        2323452,
        2345234,
        12341234,
        34563456,
        23452345,
        34563456,
      ], //出库的值
      colorArray: [
        {
          top: " #00D6FF", //蓝色
          bottom: "rgba(71,0,255,.3)",
        },
        {
          top: "#B664FF", //紫色
          bottom: "rgba(71,0,255, 0.3)",
        },
        {
          top: " #00D6FF", //蓝色
          bottom: "rgba(71,0,255,.3)",
        },
        {
          top: "#B664FF", //紫色
          bottom: "rgba(71,0,255, 0.3)",
        },
        {
          top: " #00D6FF", //蓝色
          bottom: "rgba(71,0,255,.3)",
        },
      ],
      interval: 0,
      setDataTime: 3000,
    };
  },
  destroyed() {
    if (this.interval) {
      clearInterval(this.interval);
    }
  },
  mounted() {
    // this.queryOutStoreListByWarehouse();
    this.initEcharts();
    // this.addSetTime();
  },
  methods: {
    addSetTime() {
      clearInterval(this.interval);
      let _this = this;
      this.interval = setInterval(_this.initEcharts, _this.setDataTime);
    },
    queryOutStoreListByWarehouse() {
      this.names = [
        "河北华北分仓1号库",
        "河北华北分仓2号库",
        "河北华北分仓3号库",
        "河北华北分仓4号库",
        "河北华北分仓5号库",
        "河北华北分仓6号库",
        "河北华北分仓7号库",
        "河北华北分仓8号库",
        "河北华北分仓9号库",
        "河北华北分仓10号库",
        "河北华北分仓11号库",
        "河北华北分仓12号库",
      ];
      this.values = [
        12341234,
        23452334,
        12341234,
        34567456,
        23452345,
        345673456,
        2323452,
        2345234,
        12341234,
        345673456,
        23452345,
        34563456,
      ];
      this.initEcharts();
    },
    initEcharts() {
      //数据进行处理
      // console.log(this.values);
      let val = Math.max(...this.values); //找出数组中最大的值，然后复制给series
      if (val > 0 && val < 100) {
        val = val + 10;
      } else if (val > 100 && val < 1000) {
        val = val + 100;
      } else if (val > 1000 && val < 10000) {
        val = val + 1000;
      } else if (val > 10000 && val < 100000) {
        val = val + 10000;
      } else if (val > 100000 && val < 999999) {
        val = val + 50000;
      }
      let that = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.Broken_bar);
      var displayNum = 5; //每次显示数据条数
      var groupNum = Math.ceil(that.values.length / displayNum);
      var arrGroup = [];
      for (var i = 0; i < that.values.length; i += displayNum) {
        //数据按个数分组存储
        arrGroup.push(that.values.slice(i, i + displayNum));
      }
      var areaGroup = [];
      for (var j = 0; j < that.names.length; j += displayNum) {
        //区域名称按个数分组存储
        areaGroup.push(that.names.slice(j, j + displayNum));
      }
      console.log(arrGroup, "-------1111111-------------");
      var groupOption = [];
      for (var k = 0; k < groupNum; k++) {
        var temp = {
          yAxis: [
            {
              type: "category",
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#000",
                  fontSize: 12,
                },
              },
              data: areaGroup[k],
              splitLine: { show: false },
            },
          ],
          series: [{ data: arrGroup[k] }],
        };
        groupOption.push(temp);
      }
      console.log(groupOption, "--------------------");
      let option = {
        baseOption: {
          timeline: {
            // y: 0,
            bottom: -50, //控制器的位置，可以把他给干掉了
            axisType: "category",
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 6000, // 播放的时间
            // controlStyle: {
            //     position: 'left'
            // },
            data: areaGroup,
            label: {
              formatter: function () {
                return "";
              },
            },
            emphasis: {
              //滑过的小控制按钮的颜色
              itemStyle: {
                color: "#2ad1ff",
              },
            },
            checkpointStyle: {
              //当前高亮的颜色的样式
              color: "#2ad1ff",
              borderColor: "#2ad1ff",
            },
          },
          title: {
            subtext: "",
          },
          tooltip: {},
          calculable: true,
          grid: {
            left: "2%",
            top: "0%",
            right: "6%",
            bottom: "8%",
            containLabel: true,
          },
          yAxis: [
            {
              // type:'category',
              // axisLabel:{'interval':0},
              data: that.names,
              // splitLine: {show: false},
              type: "category",
              axisTick: {
                show: false,
                alignWithLabel: false,
                length: 5,
              },
              splitLine: {
                //网格线
                show: false,
              },
              inverse: "true", //排序
              axisLine: {
                show: false,
                lineStyle: {
                  fontSize: "14px",
                  color: "#2A9DFF",
                },
              },
              // data: nameLabel,
              axisLabel: {
                formatter: function (params) {
                  var last = 0;
                  var all = params.length;
                  var fisrt = params.substring(0, 2);
                  // 没有中文括号（
                  if (params.lastIndexOf("(") == -1) {
                    // 也没有英文括号(
                    if (params.lastIndexOf("(") == -1) {
                      last = all - 3;
                    } else {
                      // 有英文括号(，就从英文括号开始截取
                      last = params.lastIndexOf("(");
                    }
                  } else {
                    last = params.lastIndexOf("（");
                  }
                  let newParamsName;
                  // 如果长度大于13个字符才显示省略号
                  if (all > 5) {
                    newParamsName =
                      fisrt + " ... " + params.substring(last, all);
                  } else {
                    newParamsName = params;
                  }
                  return "{value|" + newParamsName + "}";
                },

                rich: {
                  value: {
                    color: "#2A9DFF",
                  },
                },
              },
              triggerEvent: true,
            },
          ],
          xAxis: [
            {
              type: "value",
              show: false,
              position: "top",
              axisTick: {
                show: false,
              },
              min: 0,
              max: val,
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#fff",
                },
              },
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: "仓库分布",
              type: "bar",
              label: {
                normal: {
                  show: true,
                  position: "right",
                  formatter: "{c}",
                  textStyle: {
                    fontSize: "16px",
                    color: "#2A9DFF",
                  },
                },
              },
              data: that.values,
              itemStyle: {
                normal: {
                  show: true,
                  color: function (params) {
                    let num = that.colorArray.length;
                    return {
                      type: "linear",
                      colorStops: [
                        {
                          offset: 0,
                          color: that.colorArray[params.dataIndex % num].bottom,
                        },
                        {
                          offset: 1,
                          color: that.colorArray[params.dataIndex % num].top,
                        },
                        {
                          offset: 0,
                          color: that.colorArray[params.dataIndex % num].bottom,
                        },
                        {
                          offset: 1,
                          color: that.colorArray[params.dataIndex % num].top,
                        },
                        {
                          offset: 0,
                          color: that.colorArray[params.dataIndex % num].bottom,
                        },
                        {
                          offset: 1,
                          color: that.colorArray[params.dataIndex % num].top,
                        },
                        {
                          offset: 0,
                          color: that.colorArray[params.dataIndex % num].bottom,
                        },
                        {
                          offset: 1,
                          color: that.colorArray[params.dataIndex % num].top,
                        },
                        {
                          offset: 0,
                          color: that.colorArray[params.dataIndex % num].bottom,
                        },
                        {
                          offset: 1,
                          color: that.colorArray[params.dataIndex % num].top,
                        },
                        {
                          offset: 0,
                          color: that.colorArray[params.dataIndex % num].bottom,
                        },
                        {
                          offset: 1,
                          color: that.colorArray[params.dataIndex % num].top,
                        },
                      ],
                      //globalCoord: false
                    };
                  },
                  barBorderRadius: 70,
                  borderWidth: 0,
                  borderColor: "#333",
                },
              },
              barGap: "0%",
              barWidth: 20, //柱图宽度
              barCategoryGap: "50%",
            },
          ],
        },
        options: groupOption,
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  width: 1200px;
  margin: 0 auto;
  .charts_bar {
    margin-top: 30px;
    width: 100%;
    height: 220px;
  }
}
</style>
